<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_navigation_button_right">
        <template v-for="(item, index) in rightNavigation">
            <div class="h_navigation_button" @click.stop="myStore.layoutHandel(item)"
                :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                {{ item.label }}
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布

let { rightNavigation } = storeToRefs(myStore);

</script>

<style lang="scss" scoped>
.h_navigation_button_right {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    // 导航按钮
    .h_navigation_button {
        margin-bottom: 3px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 20px;
        font-size: medium;
        text-align: center;
        background-color: rgb(50, 50, 50);
        border-left: 3px solid rgb(50, 50, 50);
        color: rgb(176, 176, 176);
        cursor: pointer; // 小手指

        &:hover {
            color: rgb(255, 255, 255);
            border-left: 3px solid rgb(0, 0, 255);
        }

        &.h_active {
            background-color: rgb(80, 80, 80);
            color: rgb(255, 255, 255);
            border-left: 3px solid #1d9f00;
        }
    }

    &:hover {
        cursor: pointer; // 小手指
    }
}
</style>@/store